<template>
  <div class="wrap">
    <div class="user-info">
      <div class="user-png">
        <img v-if='userinfo.head_img' :src="$axios.defaults.baseURL+userinfo.head_img" alt class="user"/>
        <img v-else src="@/assets/2.jpg" alt class="user" />
      </div>
      <div class="user-details">
        <div class="user-name">
          <span class="monicker">
            <i class="iconfont iconnew gender" :class="{
             iconxingbienan: userinfo.gender ==1,
             iconxingbienv: userinfo.gender == 0
            }"></i>{{userinfo.nickname}}
          </span>
          <p class="time" v-if="userinfo.create_date">{{userinfo.create_date.split('T')[0]}}</p>
        </div>
        <a href="#/edit" class="person iconfont iconnew iconjiantou1"></a>
      </div>
    </div>
    <div class="interval"></div>

    <div class="myoperation">
      <TextDom Title = '我的关注' @clicked="$router.push('/focus')" Text = '关注的用户'/>
      <TextDom Title = '我的跟帖' @clicked="$router.push('/follow')" Text = '跟帖/回复'/>
      <TextDom Title = '我的收藏' @clicked="$router.push('/collect')" Text = '文章/视频'/>
      <TextDom Title = '设置' @clicked="popShow"/>
      <van-popup v-model="show"
       position="bottom" 
       closeable
       close-icon="close" 
       round
       :style="{ height: '20%' }" 
       class="box" @click="losShow">退出账号</van-popup>
    </div>
  </div>
</template>

<script>
// 引入顶部组件
import Top from "../../components/Top.vue";

//引入文本框组件
import TextDom from '@/components/TextDom'
export default {
  components:{ 
      Top,
      TextDom
  },
  data(){
      return {
        userinfo : '',
        show: false
      }
  },
   created(){
        //  用户详情
        //  接口类型:【GET】
        //  需要验证:【Authorization 】
        //  接口地址: /user/:id
        let id = localStorage.getItem('userid')
        // console.log(id);
         this.$axios({
             method:'get',
             url:'/user/'+id,
              
         }).then((res)=>{
            //  console.log(res);
            this.userinfo = res.data.data
         })
     },
     methods:{
        popShow() {
      this.show = true;
      },
      losShow(){
         localStorage.removeItem('token')
         localStorage.removeItem('userid')
         this.$router.replace('/login')
      }
     }
};
</script>

<style lang='less' scoped>
.user-info {
  display: flex;
  width: 100vw;
  height: 100/360 * 100vw;
  .user-png {
    width: 90/360 * 100vw;
    padding-left: 30/360 * 100vw;
    padding-top: 20/360 * 100vw;
    .user {
      width: 60/360 * 100vw;
      height: 60/360 * 100vw;
      vertical-align: middle;
      border-radius: 30/360*100vw;
    }
  }

  .user-details {
    display: flex;
    width: 270/360 * 100vw;
    justify-content: space-between;
    .user-name {
      padding-top: 25/360 * 100vw;
      padding-left: 10/360 * 100vw;
      font-size: 12/360 * 100vw;
      .monicker {
        font-size: 14/360 * 100vw;
        .gender {
          margin-right: 5/360 * 100vw;
          color: #75b9eb;
        }
      }
      .time {
        color: #afafaf;
        margin-top: 5/360 * 100vw;
      }
    }
    .person {
      padding-top: 35/360 * 100vw;
      padding-right: 10/360 * 100vw;
      color: #afafaf;
    }
  }
}

.interval {
  height: 5/360 * 100vw;
  background-color: #e4e4e4;
}

.myoperation {
  padding-left: 10/360 * 100vw;
}

.box {
  text-align: center;
  line-height: 120/360*100vw;
}
</style>